<template>
	<view>
		<!-- 选项卡 -->
		<tab-control ref="tabControl2" @tabClick="tabClick" :titles="tabTitle" />
		<!-- 待审核 -->
		<template v-if="currentType == 1">
			<view class="default" style="" v-if="toReviewed.length == 0">
				<text>您还没待审核项目哦</text>
			</view>
			<view class="con_box2" v-else>
				<view class="con_list" v-for="(item,index) in toReviewed" :key="index"
					@click="lookDetailFn(item.id,item.path)">
					<view class="left">
						<image src="../../../static/logo/logo_1024.png" mode=""
							style="width: 66upx;height:66upx;border-radius: 50%;background:rgba(216,216,216,1);">
						</image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{item.confirm_intro}}</text>
							<text class="time">{{item.status}}</text>
						</view>
						<view class="name">编号:{{item.confirm_no}}</view>
						<view class="name">时间:{{item.start_time}}</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 审核通过 -->
		<template v-if="currentType == 2">
			<view class="default" style="" v-if="approval.length == 0">
				<text>您还没审核通过的项目哦</text>
			</view>
			<view class="con_box2" v-else>
				<view class="con_list" v-for="(item,index) in approval" :key="index"
					@click="lookDetailFn(item.id,item.path)">
					<view class="left">
						<image src="../../../static/logo/logo_1024.png" mode=""
							style="width: 66upx;height:66upx;border-radius: 50%;background:rgba(216,216,216,1);">
						</image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{item.confirm_intro}}</text>
							<text class="time">{{item.status}}</text>
						</view>
						<view class="name">编号:{{item.confirm_no}}</view>
						<view class="name">时间:{{item.start_time}}</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 审核驳回 -->
		<template v-if="currentType == 3">
			<view class="default" style="" v-if="reject.length == 0">
				<text>您还没审核驳回的项目哦</text>
			</view>
			<view class="con_box2" v-else>
				<view class="con_list" v-for="(item,index) in reject" :key="index"
					@click="lookDetailFn(item.id,item.path)">
					<view class="left">
						<image src="../../../static/logo/logo_1024.png" mode=""
							style="width: 66upx;height:66upx;border-radius: 50%;background:rgba(216,216,216,1);">
						</image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{item.confirm_intro}}</text>
							<text class="time">{{item.status}}</text>
						</view>
						<view class="name">编号:{{item.confirm_no}}</view>
						<view class="name">时间:{{item.start_time}}</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 已撤销 -->
		<template v-if="currentType == 4">
			<view class="default" style="" v-if="revoke.length == 0">
				<text>您还没已撤销的项目哦</text>
			</view>
			<view class="con_box2" v-else>
				<view class="con_list" v-for="(item,index) in revoke" :key="index"
					@click="lookDetailFn(item.id,item.path)">
					<view class="left">
						<image src="../../../static/logo/logo_1024.png" mode=""
							style="width: 66upx;height:66upx;border-radius: 50%;background:rgba(216,216,216,1);">
						</image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{item.confirm_intro}}</text>
							<text class="time">{{item.status}}</text>
						</view>
						<view class="name">编号:{{item.confirm_no}}</view>
						<view class="name">时间:{{item.start_time}}</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 所有审核 -->
		<template v-if="currentType == 5">
			<view class="default" style="" v-if="dataList.length == 0">
				<text>您还没审核项目哦</text>
			</view>
			<view class="con_box2" v-else>
				<view class="con_list" v-for="(item,index) in dataList" :key="index"
					@click="lookDetailFn(item.id,item.path)">
					<view class="left">
						<image src="../../../static/logo/logo_1024.png" mode=""
							style="width: 66upx;height:66upx;border-radius: 50%;background:rgba(216,216,216,1);">
						</image>
					</view>
					<view class="right">
						<view class="title">
							<text class="name">{{item.confirm_intro}}</text>
							<text class="time">{{item.status}}</text>
						</view>
						<view class="name">编号:{{item.confirm_no}}</view>
						<view class="name">时间:{{item.start_time}}</view>
					</view>
				</view>
			</view>
		</template>



	</view>
</template>

<script>
	import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
	import sun from '@/utils/sun.js'
	import navigation from '@/component/navigation.vue'

	import tabControl from '@/component/tabControl/tabControl.vue'

	export default {
		components: {
			navigation,
			timeSelector,
			tabControl
		},
		data() {
			return {
				options: '',
				dataList: [],
				tabTitle: [{
						amount: 0,
						title: '待审核'
					},
					{
						amount: 0,
						title: '审核通过'
					},
					{
						amount: 0,
						title: '审核驳回'
					},
					{
						amount: 0,
						title: '已撤销'
					},
					{
						amount: 0,
						title: '所有审核'
					},
				],
				currentType: 1,
				toReviewed: [], // 待审核
				approval: [], //审核通过
				reject: [], // 审核驳回
				revoke: [], // 已撤销
			};
		},
		onLoad(options) {
			this.options = options;
			this.getData(this.options)
		},
		methods: {
			getData(e) {
				let that = this
				sun.request({
					url: "/h5/order.confirm/orderConfirms",
					showLoading: true,
					token: true,
					data: {
						order_id: e.id,
					},
					success(res) {
						if (res.code == 200) {
							that.dataList = res.data.list;
							that.getCheckList();
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
							})
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})
			},

			//首页分类切换
			tabClick(index) {
				switch (index) {
					case 0:
						this.currentType = 1;
						break;
					case 1:
						this.currentType = 2;
						break;
					case 2:
						this.currentType = 3;
						break;
					case 3:
						this.currentType = 4;
						break;
					case 4:
						this.currentType = 5;
						break;
				}
				// this.$refs.tabControl1.currentIndex = index;
				this.$refs.tabControl2.currentIndex = index;
			},

			// 审核列表
			getCheckList() {
				let that = this;
				let data = that.dataList;
				data.forEach(item => {
					if (item.status == '待审核' || item.status == '审核中') {
						that.toReviewed.push(item)
					} else if (item.status == '审核通过') {
						that.approval.push(item)
					} else if (item.status == '审核驳回') {
						that.reject.push(item)
					} else if (item.status == '已撤销') {
						that.revoke.push(item)
					}
				})

				for (let i = 0; i < that.tabTitle.length; i++) {
					if (that.tabTitle[i].title == '待审核') {
						that.tabTitle[i].amount = that.toReviewed.length;
					} else if (that.tabTitle[i].title == '审核通过') {
						that.tabTitle[i].amount = that.approval.length;
					} else if (that.tabTitle[i].title == '审核驳回') {
						that.tabTitle[i].amount = that.reject.length;
					} else if (that.tabTitle[i].title == '已撤销') {
						that.tabTitle[i].amount = that.revoke.length;
					}else{
						that.tabTitle[i].amount = that.dataList.length;
					}
				}
			},

			// 查看审核详情
			lookDetailFn(id, path) {
				if (path) uni.navigateTo({
					url: `${path}?id=${id}`
				})
			}

		}
	}
</script>

<style lang="less">
	page {
		padding: 0;
	}

	.con_box2 {
		width: 100%;
		height: auto;

	}

	.con_list {
		width: 100%;
		height: auto;
		border-bottom: 2upx solid #EEEEEE;
		box-sizing: border-box;
		background: #FFFFFF;
		display: flex;

		.left {
			width: 100upx;
			height: auto;
			padding-left: 32upx;
			padding-top: 32upx;
			box-sizing: border-box;
			background: #FFFFFF;
		}

		.right {
			width: 650upx;
			padding: 32upx 32upx 32upx 22upx;
			box-sizing: border-box;
			background: #FFFFFF;

			.title {
				width: 100%;
				margin-bottom: 7upx;
				position: relative;

				.name {
					width: auto;
					height: 100%;
					font-size: 34upx;
					color: rgba(51, 51, 51, 1);
					line-height: 48upx;
				}

				.time {
					width: auto;
					font-size: 24upx;
					color: rgba(153, 153, 153, 1);
					line-height: 48upx;
					position: absolute;
					right: 0;
				}
			}

			.name {
				width: auto;
				font-size: 26upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 37upx;
			}

			.hint {
				width: auto;
				font-size: 26upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(231, 184, 94, 1);
				line-height: 37upx;
				margin-top: 4upx;
			}
		}
	}

	.default {
		text-align: center;
		font-size: 28upx;
		width: 400upx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		// margin: 0;
	}
</style>
